<template>

    <el-drawer
      custom-class="gallery_drawer"
      :visible.sync="show"
      :direction="direction"
      :show-close='false'
      :modal='false'
      :withHeader='false'
      :before-close="cancle">
      <div class="gallery_menu">
        <p class="gallery_btn">
          <i class="iconfont icon-arrow_left" :class="{'not_allow': !(curFolderIndex > 0) }" @click="folderPrev()"></i>
        </p>
        <p class="gallery_folder" id="gallery_folder">
          <span v-for="(item, index) in listFolder" :key="item.id" :class="{'active': curFolder.label == item.label }" @click="setFolder(item, index)">{{item.label}}</span>
        </p>
        <p class="gallery_btn"> 
          <i class="iconfont icon-arrow_right" :class="{'not_allow': !(curFolderIndex <  (listFolder.length - 1)) }" @click="folderNext()" ></i>
        </p>

      </div>
      <div class="gallery_content" >
        <el-input  placeholder="图片名称" prefix-icon="el-icon-search" v-model="form.filename.value" @change="getTableList"  ></el-input>
        <div class="gallery_content_image">
          <div class="gallery_content_image_item" :class="{'active': item.checked}" v-for="item in listImage" :key="item" @click="chooseImege(item)">
            <el-image :src="utils.setCdnUrl() + item.url"></el-image>
            <p class="gallery_image_title">{{item.filename}}</p>
            <div class="gallery_mode" v-show="item.checked">
              <i class="iconfont icon-select_image" ></i>
            </div>
            <p class="gallery_image_item_hover"></p>


          </div>
        </div>
      </div>
      <div class="gallery_btn">
        <el-button type="search" @click="saveBtn">保存</el-button>
        <el-button @click="cancle()">取消</el-button>
      </div>

      <div class="close_gallery" @click="cancle">
        <img :src="image_normal" class="icon-shrink icon-shrink_normal">
        <img :src="image_hover" class="icon-shrink icon-shrink_hover">
      </div>

    </el-drawer>
 
 
</template>

<script>
import { folderList, imageList, imageUpload } from '@/api/gallery/gallery.js'
import { setSearchParams } from '@/utils/index.js'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      curFolderIndex: 0,
      curFolder: {}, // 当前选中的文件夹
      listFolder: [] ,// 图库文件夹列表
      listImage: [], // 图片列表
      loading: false, // 加载动画
      form: {
        filename: { value: '', op: 'like' }, //图片名称
        is_history : { value: '0', op: '=' },
      },
      selectImage: [],// 选中的图片
      image_normal: require('@/assets/gallery/shrink_normal.svg'),
      image_hover: require('@/assets/gallery/shrink_hover.svg'),
    }
  },
  props: {
    show: Boolean,
    closeDialog:Function,
    direction: String || 'rtl',
    isMulti: Boolean || false, // 是否多选，默认是不支持多选
    type: String , //图片类型
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  watch: {
    // show: function() {
    //   if(this.show) {
    //     this.getFolderList()
    //     // this.getTableList()
    //   }
    // }
  },
  created () {
    this.getFolderList()
  },
  methods: {
    saveBtn () {
      if(!this.isMulti) { // 单选
        let params = {
          id: this.selectImage[0].id,
          type: this.type,
          imagetype: this.selectImage[0].imagetype,
          filesize: this.selectImage[0].filesize
        }
        imageUpload(params).then(res=>{
          if(res.state == 1 ){
            this.$emit('closeDialog', res.data)
          }
        })
      }else {
        this.$emit('closeDialog', this.selectImage)
      }


    },
    cancle () {
      this.$emit('closeDialog')
      this.selectImage = []
      this.curFolder = []
      this.curFolder  = this.listFolder[0]
      this.listImage = []
      this.curFolderIndex = 0
      for(let item in this.form){
        this.form[item].value =""
      }
    },
    // 选择图片
    chooseImege (item) {
      let list = this.selectImage;
      if(!this.isMulti) { // 单选
        if (!item.checked) { //当前选中的没有选中状态
          if(list.length > 0){              //重置之前的样式
            for(let i = 0; i < this.listImage.length; i++ ){
              if(this.listImage[i].id ==  list[0].id) {
                this.listImage[i].checked = false
              }
            }
          }
          item.checked = true  // 当前的加入选择列表
          let array = []
          array.push(item)
          this.selectImage = array
        } else {
          item.checked = false
          this.selectImage = []
        }
      } else { // 多选
        if(item.checked) { //已经选中的移除
          item.checked = false
           for(let i = 0; i < list.length; i++ ){
              if(item.id ==  list[i].id) {
                this.selectImage.splice(i, 1)
              }
            }
        } else { //未选中直接加入
          item.checked = true
          this.selectImage.push(item)
        }
      }
    },
    // 设置每一个的参数
    setParams (page, pageSize) {
      this.loading = true
      let form = this.form
      if (this.curFolder.label == '我的图片'){
        form.admin_id = { value: this.userInfo.id, op: '=' }
        delete form.folder_id
      } else if (this.curFolder.label !== '所有图片') {
        form.folder_id = { value: this.curFolder.id, op: '=' }
        delete form.admin_id
      } else {
        if(form.folder_id){
          delete form.folder_id
        }
        if(form.admin_id){
          delete form.admin_id
        } 
      }
      let params = setSearchParams(form, pageSize, page, 'asc', 'uploadtime')
      return params
    },
    // 滚动到底部加载
    getScrollTableList () {
      this.loading = true
      this.page+=1
      let params = this.setParams(this.page, 6)
      this.isDataReset && imageList(params).then(res=>{
        let list = res.data.data
        // 判断是否可持续加载
        if( list.length == 0 && this.page > 1){
          this.$message.error('没有更多图片了')
          this.isDataReset = false
        } else {
          this.isDataReset = true
        }
        for (let i = 0; i < list.length; i++){
          list[i].checked= false
        }
        if(this.listImage.length > 0 && this.page !== 1){
          this.listImage = this.listImage.concat(list)
        }else{
          this.listImage = list
        }
        this.page = res.data.current_page
        this.loading = false
      })
      if(!this.isDataReset) {
        this.loading = false
      }
     
    },
    // 获取第一页的数据
    getTableList(){
      let params = this.setParams(1, 12)
      imageList(params).then(res=>{
        let list = res.data.data
        for (let i = 0; i < list.length; i++){
          list[i].checked= false
        }
        this.listImage = list
        this.isDataReset = true

        this.page = res.data.current_page
        this.loading = false
        this.page == 1 && this.scrollEventListener()
      })
    },
    // 滚动监听事件
    scrollEventListener () {
      this.$nextTick(() => {
        let galleryData = document.getElementsByClassName('gallery_content_image')[0]
        galleryData.onscroll = () => {
          let scrollTop = galleryData.scrollTop
          let scrollHeight = galleryData.scrollHeight;
          let offsetHeight  = galleryData.offsetHeight ;
          if ((offsetHeight + scrollTop) - scrollHeight >= -1 &&  !this.loading ) {
            //每次滚动到底部size+10

            this.getScrollTableList()
          }
        }
        

      })
    
      
    },
    // 文件夹列表
    getFolderList () {
      folderList().then(res => {
        if(res.state == 1){
           let array = [
            {label: '所有图片', id: '1'},
            {label: '我的图片', id: '2'},
          ]
          let list =  array.concat(res.data) 
          this.curFolder  = list[0]
          this.listFolder = list
          this.getTableList()
        }
      })
    },
    // 选择文件夹
    setFolder (item,i) {
      this.curFolder = item
      this.curFolderIndex = i
      this.getTableList()
    },

    // 前一个文件夹
    folderPrev () {
      if (this.curFolderIndex > 0){
        for(let i = 0; i < this.listFolder.length; i++){
          if(i == this.curFolderIndex){
            this.curFolder = this.listFolder[i-1]
            this.curFolderIndex -= 1
            break
          }

        }
        this.selectFolder()
      }
    },// 后一个文件夹
    folderNext () {
      let len = this.listFolder.length
      if (this.curFolderIndex < len){
        for(let i = 0; i < len -1; i++){
          if(i == this.curFolderIndex){
            this.curFolderIndex += 1
            this.curFolder = this.listFolder[this.curFolderIndex]
            break
           
          }
        }
        this.selectFolder()
      }
    },
    // 选择文件夹后滚动到指定文件夹的位置
    selectFolder () {
      this.$nextTick(() => {
        let activeObj = document.getElementById('gallery_folder').getElementsByClassName('active')[0]
        let selectMenu = document.getElementById('gallery_folder')
        let left = activeObj.offsetLeft - selectMenu.offsetLeft
        selectMenu.scrollTo({
          left: left,
          behavior: 'smooth'
        });      
        this.getTableList()
      })
      
     
    },
  }

}
</script>

<style lang="scss">
.el-drawer__wrapper{
  z-index: 2026 !important;
}
  .gallery_drawer{
    width: 544px !important;
    outline: none;
    overflow: inherit;
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 17px 2px rgba(125,125,125, 0.01), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  }
  // 顶部导航
  .gallery_menu{
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #EBEAEA;
    height: 54px;
    .gallery_folder{
      white-space: nowrap;
      overflow: hidden;
      padding: 16px 0px 18px;
      margin: 0 16px;
      width: 100%;
      span{
        color: #666666;
        font-size: 14px;
        margin-right: 24px;
        position: relative;
        cursor: pointer;
        top: 2px;
        &:last-of-type{
          margin-right: 0;
        }
        &.active,
        &:hover{
          color:#303030 ;
          font-weight: bolder;
        }
      }
    }
    .gallery_btn{
      padding: 16px 0px 14px;
      i{font-size: 20px;cursor: pointer;color: #ebeaea ; 
        &:hover{
          color: #303030;
        }
      }
      i.not_allow {cursor: not-allowed;color: #ebeaea;  font-size: 20px;  }
    }
  }
  // 左侧收缩按钮
  .close_gallery{
    .icon-shrink{
      width: 64px;
      height: 64px;
      position: absolute;
      right: 544px;
      top: 50%;
      z-index: 2005;
      font-size: 64px;
      margin-top: -42px;
      cursor: pointer;
      &.icon-shrink_normal{opacity: 1;}
      &.icon-shrink_hover{opacity: 0;}
     
    }
    &:hover{
      .icon-shrink_normal{opacity: 0;}
      .icon-shrink_hover{opacity: 1;}
    }
  }
  // 图片展示区域
  .gallery_content{
    // padding-left: 16px;
    // height: calc(100vh - 118px);
    // overflow: auto;
    // input 搜索条件
    .el-input{
      margin: 16px 16px;
      width: calc(100% - 32px);
      .el-input__inner{
        height: 32px;
        line-height: 32px;
        padding-left: 46px;
      }
      .el-input__prefix{
        left: 0;
        .el-input__icon{
          line-height: 32px;
          width: 46px;
        }
      }
    }
    // 图片展示区域
    .gallery_content_image{
      padding-left: 16px;
      height: calc(100vh - 206px);
      overflow: auto;
      margin-bottom: 24px;
      .gallery_content_image_item{
        cursor: pointer;
        width: 160px;
        position: relative;
        margin-bottom: 24px;
        display: inline-block;
        margin-right: 16px;
        &:nth-of-type(3n) {margin-right: 0;}
        .el-image{
          width: 160px;
          height: 160px;
          border-radius: 4px;
          border:1px solid #EBEAEA;
          img{
            object-fit: contain;
          }
        }
        >p.gallery_image_title{
          color: #666666;
          font-size: 14px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .gallery_mode{
          position: absolute;
          top: 0;
          left: 0;   
          width: 160px;
          height: 160px;
          line-height: 160px;
          text-align: center;
          background-color: rgba(48, 48, 48, 0.2);
          i.icon-select_image{
            font-size: 24px;
            color: #ffffff;
          }
        }
        p.gallery_image_item_hover{
          position: absolute;
          top: 0;
          left: 0;   
          width: 160px;
          height: 160px;
          background-color: rgba(48, 48, 48, 0.2);
          border-radius: 4px;
          text-align: center;
          line-height: 160px;
          display: none;
         
        }

        &:hover{
          >p.gallery_image_title{
            color: #303030;
          }
          >p.gallery_image_item_hover{
            display: block;
          }
        }
        &.active{
          &:hover{
              >p.gallery_image_item_hover{
              display: none;
            }
          }
        }
      }
    }
  }
  .el-drawer__body{
    // 底部按钮
    >.gallery_btn{
      text-align: center;
      line-height: 64px;
      border-top: 1px solid #EBEAEA;
    }
  }

 


</style>